<template>
    <fieldset>
        <legend>购物车</legend>
        <h1>{{tag}}</h1>
        <ul>
            <!-- 24 渲染页面 -->
            <li v-for="item in carts" :key="item.id">
            <span>产品名称</span>
            <b>{{item.title}}</b>
            ---
            <span>产品单价</span>
            <b>{{item.price}}</b>
            ---
            <span>数量:</span>
            <b>{{item.count}}</b>
            </li>
        </ul>
        <!-- 28设置总价格 -->
        <h1 :style="{textAlign:'right'}">
            总价格:
            <span :style="{color:'red'}">{{total}}</span>
                                            <!-- 32  展示  完成 -->
        </h1>
    </fieldset>
</template>
<script>   
// 30引入
import{ mapState ,mapGetters} from 'vuex'
export default{
    computed:{
    ...mapState('Cart',['tag','carts']),
    //31映射
    ...mapGetters('Cart',['total']),

    }
}
</script>